<template>
	<div class="tab-bar-item " @click="itemClick()">
		<div v-if="!isTrue" >
			<slot  name="item-icon"></slot>
		</div>
	   
	  <div v-else>
	  	 <slot  name="item-icon-active"></slot>
	  </div>
	   <div :style="activeStyle">
			 <slot name="item-text"></slot>
	   </div>
	  
	</div>
</template>
			
<script>
	export default {
	  name: 'TabBarItem',
	  props:{
		  path:String,
		  activeColor:{
			  type:String,
			  default:'red'//如果不修改颜色  默认为红色
		  }
	  },
	  data(){
		  return{
			  
		  }
	  },
	  computed:{//计算属性 如果过于复杂  一般放在计算属性中
		  isTrue(){//控制图片和颜色
			  return this.$route.path.indexOf(this.path) !==-1
		  },
		  activeStyle(){//决定颜色
			  return this.isTrue ? {color:this.activeColor} :{}
		  }
	  },
	  methods:{
		  itemClick(){//跳转页面
			  this.$router.push(this.path);
		  }
	  }
	}
</script>

<style scoped>
	
	.tab-bar-item {
	  flex: 1;
	  text-align: center;
	  height: 49px;
	}
	.tab-bar-item img{
		margin-top: 3px;
		width: 24px;
		height: 24px;
		vertical-align: middle;/* 去掉图片空间属性 */
	}
</style>
